<template>
    <button class="dr-button"
            :class="classes"
            :disabled="disabled">
        <span v-if="loading" class="dr-loadingIndicator"></span>
        <slot/>
    </button>
</template>
<script lang="ts">
    import {computed} from 'vue'

    export default {
        props: {
            theme: {
                type: String,
                default: "normal"
            },
            size: {
                type: String,
                default: "normal"
            },
            level: {
                type: String,
                default: "normal"
            },
            disabled: {
                type: Boolean,
                default: false
            },
            loading: {
                type: Boolean,
                default: false
            }
        },
        setup(props) {
            const {theme, size, level} = props
            const classes = computed(() => {
                return {
                    [`dr-theme-${theme}`]: theme,
                    [`dr-size-${size}`]: size,
                    [`dr-level-${level}`]: level,
                }
            })
            return {classes}
        }
    };
</script>
<style lang="scss">
    $h: 32px;
    $color: #606266;
    $blue: #50a0ff;
    $radius: 4px;
    $red: red;
    .dr-button {
        margin: 0 8px 8px 0;
        box-sizing: border-box;
        height: $h;
        padding: 0 12px;
        cursor: pointer;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        white-space: nowrap;
        background: white;
        color: $color;
        border: 1px solid lighten($color, 50%);
        border-radius: $radius;
        box-shadow: 0 1px 0 fade-out(black, 0.95);
        transition: background 250ms;

        &:focus {
            outline: none;
        }

        //兼容firefox的focus
        &::-moz-focus-inner {
            border: 0;
        }

        &.dr-theme-button {
            background: $blue;
            color: #fff;
            border: none;
            border-radius: $radius;
            > .dr-loadingIndicator{
                border-color: #fff transparent #fff transparent;
            }
        }

        &.dr-theme-link {
            border-color: transparent;
            box-shadow: none;
            color: $blue;
        }

        &.dr-theme-text {
            border-color: transparent;
            box-shadow: none;
            color: inherit;
        }

        &.dr-size-big {
            font-size: 24px;
            height: 48px;
            padding: 0 16px
        }

        &.dr-size-small {
            font-size: 12px;
            height: 20px;
            padding: 0 4px;
        }

        &.dr-level-main {
            background: $blue;
            color: white;
            border-color: $blue;

            &:hover,
            &:focus {
                background: darken($blue, 10%);
                border-color: darken($blue, 10%);
            }
        }

        &.dr-level-danger {
            background: $red;
            border-color: $red;
            color: white;

            &:hover,
            &:focus {
                background: darken($red, 10%);
                border-color: darken($red, 10%);
            }
        }

        &.dr-theme-button, &.dr-theme-normal {
            &[disabled] {
                cursor: not-allowed;
                color: grey;

                &:hover {
                    border-color: grey;
                }
            }
        }

        &.dr-theme-button {
            &[disabled] {
                color: #fff;
                background: lighten($blue, 30%);;
            }
        }

        &.dr-theme-link, &.dr-theme-text {
            &[disabled] {
                cursor: not-allowed;
                color: grey;
            }
        }

        &.dr-theme-link {
            &[disabled] {
                color: #ff000033;
            }
        }
        > .dr-loadingIndicator {
            width: 14px;
            height: 14px;
            display: inline-block;
            margin-right: 4px;
            border-radius: 8px;
            border-color: $blue transparent $blue transparent;
            border-style: solid;
            border-width: 2px;
            animation: dr-spin 1s infinite linear;
        }
    }

    @keyframes dr-spin {
        0% {
            transform: rotate(0deg)
        }
        100% {
            transform: rotate(360deg)
        }
    }
</style>
